<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>arrow code view</title>
    <link id="highlight-style" rel="stylesheet" href="./highlight/styles/atom-one-dark.min.css">
    <link rel="stylesheet" href="./css/code_font.css">
    <link rel="stylesheet" href="./css/code_view.css">
    <script src="./highlight/highlight.min.js"></script>
    <script src="./highlight/highlightjs-line-numbers.min.js"></script>
    <script src="./js/code_view.js"></script>

    <style>
        .hidden {
            display: none;
        }
    </style>
</head>

<body>    
    <div class="main-frame hidden" id="main-frame">
        <div class="top-bar">
            <button onclick="toggleLeftBar()" id="toggle-left-bar-btn">Hide</button>
            <button onclick="resetCatch()" id="rest-btn">Reset</button>
            <button onclick="openSelectedFile()" id="open-selected-file-btn">Open</button>
            <!-- <select id="theme-selector" onchange="switchHighlightStyle(this.value)">
                <option value="./highlight/styles/monokai.min.css">monokai </option>
                <option value="./highlight/styles/github-dark.min.css">GitHub Dark </option>
                <option value="./highlight/styles/a11y-dark.min.css">a11y Dark</option>
                <option value="./highlight/styles/qtcreator-dark.min.css">qtcreator dark</option>
                <option value="./highlight/styles/isbl-editor-dark.min.css">isbl editor Dark</option>
                <option value="./highlight/styles/github-dark-dimmed.min.css">GitHub Dark Dimmed</option>
                <option value="./highlight/styles/atom-one-dark.min.css">Atom One Dark</option>
                <option value="./highlight/styles/xt256.min.css">xt256</option>
            </select> -->
            <span id="top-bar-title" style="margin-left: 10px;">This is the top bar</span>
        </div>
        <div class="child-frame">
            <div class="left-bar" id="left-bar-container">
                <div class="filter-text">
                    <input type="text" class="filter-input" id="filter-input" placeholder="Filter files..." oninput="filterFiles()">
                </div>
                <div class="path-list" id="path-list-container">
                    <!-- <div class="path-item" id="index.html-path-item" onclick="createOrActivateTab('index.html')">
                                        <img src="./image/folder.jpeg" alt="icon" class="icon">
                                        index.html
                                    </div>
                                    <div class="path-item" id="styles.css-path-item" onclick="createOrActivateTab('styles.css')">
                                        <img src="./image/file.png" alt="icon" class="icon">
                                        styles.css
                                    </div>
                                    <div class="path-item" id="script.js-path-item" onclick="createOrActivateTab('script.js')">
                                        <img src="./image/file.png" alt="icon" class="icon">
                                        script.js
                                    </div> -->
                </div>
            </div>
            <div class="view-frame" id="view-frame-container">
                <div class="tabs" id="tabs-container">
                </div>
                <div class="view" id="view-container" onscroll="handleScroll()">
                    <pre id="show-code-pre"><code id="show-code">
                    </code></pre>
                </div>
            </div>
        </div>
    </div>
    <div id="password-container" class="password-container">
        <div class="password-box">
            <form id="password-form" onsubmit="return false;">
                <input type="password" id="password" placeholder="Enter password">
                <button onclick="checkPassword()">Submit</button>
            </form>
        </div>
    </div>
</body>

</html>